<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>创建图像映射</title>
</head>
<body>

<p>请点击图像上的星球，把它们放大。</p>
<img src="img/eg_planets.jpg" alt="Planets" border="0" usemap="#planetmap">
<map name="planetmap" id="planetmap">

  <area shape="circle" coords="180,139,14" href="venus.html" target="_blank" alt="Venus">

  <area shape="circle" coords="129,161,10" href="mercur.html" target="_blank" alt="Mercury">

  <area shape="rect" coords="0,0,110,260" href="sun.html" target="_blank" alt="Sun">

</map>
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
</body>
</html>